<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>文件上传</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="icon" th:href="@{/resources/favicon.ico}">
    <link rel="stylesheet" th:href="@{/resources/layui/css/layui.css}" media="all"/>
    <link rel="stylesheet" th:href="@{/resources/css/public.css}" media="all"/>
</head>
<body>
<div>
    <blockquote class="layui-elem-quote layui-quote-nm">
        <div class="layui-upload-drag" style="width: 258px;height: 50px" id="upload">
            <i class="layui-icon"></i>
            <p>点击上传，或将文件拖拽到此处</p>
            <div class="layui-hide" id="uploadDemoView">
                <hr>
            </div>
        </div>
        <form method="post" id="searchFrm" lay-filter="searchFrm" class="layui-form-pane">
            <div class="layui-input-inline">
                <label class="layui-form-label">文件名称[新]</label>
                <div class="layui-input-inline" style="width: 300px">
                    <input type="text" name="newFileName" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-input-inline">
                <label class="layui-form-label">操作员</label>
                <div class="layui-input-inline">
                    <input type="text" name="uploadUser" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-input-inline" style="padding-left: 10px">
                <button type="button" id="doSearch" class="layui-btn" lay-submit="" lay-filter="doSearch"><span class="layui-icon layui-icon-search"></span>查询</button>
                <button type="button" id="doReset" class="layui-btn layui-btn-warm"><span class="layui-icon layui-icon-refresh-1"></span>重置</button>
                <button type="button" id="updateFileStatus" class="layui-btn layui-btn-primary layui-border-green"><span class="layui-icon layui-icon-component"></span>点击刷新文件状态</button>
            </div>
        </form>
    </blockquote>
</div>
<div>
    <table id="queryFile" lay-filter="queryFile"></table>
    <div id="fileRowBar" style="display: none;">
        <button type="button" lay-event="download" class="layui-btn layui-btn-sm"><span class="layui-icon layui-icon-edit"></span>下载</button>
        <button type="button" lay-event="delete" class="layui-btn layui-btn-sm layui-btn-danger"><span class="layui-icon layui-icon-delete"></span>删除</button>
    </div>
</div>

<script type="text/javascript" th:src="@{/resources/layui/layui.js}"></script>
<script type="text/javascript">
    layui.use(['jquery', 'layer', 'form', 'upload', 'element','table'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var upload = layui.upload;
        var table = layui.table;
        var form=layui.form;
        // 拖拽上传【支持多文件同时上传】
        upload.render({
            elem: '#upload'
            , url: '/upload/uploadFile'
            , accept: 'file'
            , done: function () {
                layer.msg('上传成功');
                tableIndex.reload();
            }
        });
        var tableIndex = table.render({
             elem: '#queryFile'
            ,url: '/upload/queryFileForPage'
            ,height:'full-195'
            ,limit:'20'
            ,limits:[20,40,60,80]
            ,page: true
            ,cols: [ [
                 {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left',align:'center'}
                ,{field: 'oldFileName', title: '原文件名', width:350}
                ,{field: 'newFileName', title: '新文件名', width:470}
                ,{field: 'status', title: '服务器文件状态', width:140,align:'center',templet:function(d){
                        return d.status==1?'<font color=blue>存在</font>':'<font color=red>不存在</font>';}}
                ,{field: 'uploadUser', title: '操作员', width:80}
                ,{field: 'uploadTime', title: '上传时间', width: 160, sort: true}
                ,{field: 'path', title: '存储地址', width: 580}
                ,{fixed: 'right', title:'操作', toolbar: '#fileRowBar',align:'center',width:'170'}
            ] ]
        });
        //模糊查询
        $("#doSearch").click(function () {
            var params=$("#searchFrm").serialize();
            tableIndex.reload({
                url:'/upload/queryFileForPage?'+params,
                page:{
                    curr:1
                }
            });
            return false;
        })
        $("#doReset").click(function () {
            $("#searchFrm")[0].reset()
            $("#doSearch").click()
        })
        // 点击按钮刷新文件状态后触发该方法
        $("#updateFileStatus").click(function () {
            layer.confirm('此操作将刷新所有文件状态，将数据库文件状态和服务器文件状态更新一致，可能耗时较久！', {icon: 7, title:'提示'}, function(){
                $.post("/upload/updateFileStatus",function(){
                    layer.msg('文件状态更新成功');
                    tableIndex.reload();
                });
            });
        })
        // 监听行工具条的事件
        table.on("tool(queryFile)",function(obj){
            var data = obj.data; // 获得当前行数据
            switch(obj.event){
                case 'download':
                    downloadFile(data);
                    break;
                case 'delete':
                    deleteFile(data);
                    break;
            }
        });
        // 文件下载方法【选中下载的文件将被自动下载到电脑桌面】
        function downloadFile(data){
            if (data.status == 1){
                layer.confirm('你确定要下载【'+data.newFileName+'】这个文件吗?【下载的文件将被自动下载到电脑桌面】', {icon: 3, title:'提示'}, function(){
                    $.post("/upload/downloadFile",{fileName:data.newFileName},function(){
                        layer.msg('下载成功');
                        tableIndex.reload();
                    })
                });
            }else {
                layer.msg('下载失败【文件不存在或者数据库中记录异常】');
            }
        }
        // 文件删除方法
        function deleteFile(data){
            layer.confirm('你确定要删除【'+data.newFileName+'】这个文件吗?【数据库记录和文件将被同时删除】', {icon: 3, title:'提示'}, function(){
                $.post("/upload/deleteFile",{path:data.path},function(){
                    layer.msg('删除成功');
                    tableIndex.reload();
                })
            });
        }
    });
</script>
</body>
</html>
